<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于金融知识图谱的知识计算引擎</title>

    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">

    <link rel="shortcut icon" href="../static/images/北邮LOGO.png">
    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="../static/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="../static/css/nifty-demo-icons.min.css" rel="stylesheet">


    <!--Demo [ DEMONSTRATION ]-->
    <link href="../static/css/nifty-demo-icons.min.css" rel="stylesheet">
    <link href="../static/css/nifty-demo.min.css" rel="stylesheet">
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../static/css/wiki.css" rel="stylesheet">


    <!--JAVASCRIPT-->
    <!--=================================================-->

    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="../static/css/pace.min.css" rel="stylesheet">

    <script src="../static/js/pace.min.js"></script>


    <!--jQuery [ REQUIRED ]-->
    <script src="../static/js/jquery-2.2.4.min.js"></script>


    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="../static/js/bootstrap.min.js"></script>


    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="../static/js/nifty.min.js"></script>
    <script src="../static/js/icons.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/tags.js"></script>


    <!--Demo script [ DEMONSTRATION ]-->
    <script src="../static/js/nifty-demo.min.js"></script>
    <style type="text/css">
        .tagsList {position:relative; width:250px; height:250px; }
        .tagsList a {position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; color:gray; font-weight:bold; text-decoration:none; padding: 3px 6px; }
        .tagsList a:hover { color:#249e92; letter-spacing:2px;}    /* 光标移动到字符则变绿，字符间距扩大*/
        #search:focus{
            border: 1px solid #249e92;
        }
    </style>

</head>

<body>

    <div id="container" class="effect aside-float aside-bright mainnav-lg">

        <!--NAVBAR-->
        <header id="navbar">
            <div id="navbar-container" class="boxed">
                <!--Brand logo & name-->
                <div class="navbar-header">
                    <a href="{{ url_for('index') }}" class="navbar-brand">
                        <img src="../static/images/北邮LOGO.png" alt="Nifty Logo" class="brand-icon">
                        <div class="brand-title">
                            <span class="brand-text">陈学楷研创</span>
                        </div>
                    </a>
                </div>
                <!--End brand logo & name-->

                <!--Navbar Dropdown-->
                <div class="navbar-content clearfix">
                    <ul class="nav navbar-top-links pull-left">
                        <!--Navigation toogle button-->
                        <li class="tgl-menu-btn">
                            <a class="mainnav-toggle" href="#">
                                <i class="demo-pli-view-list"></i>
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-top-links pull-left">
                        <h4>基于金融知识图谱的知识计算引擎构建</h4>
                    </ul>
                </div>
                <!--End Navbar Dropdown-->
            </div>
        </header>
        <!--END NAVBAR-->

        <div class="boxed">
            <!--MAIN NAVIGATION-->
            <nav id="mainnav-container">
                <div id="mainnav">
                    <!--Menu-->
                    <div id="mainnav-menu-wrap">
                        <div class="nano">
                            <div class="nano-content">
                                <ul id="mainnav-menu" class="list-group">
                                    <!--Category name1-->
						            <li class="list-header">图谱可视化</li>
                                    <!--Menu list item-->
                                   <li>
                                        <a href="{{ url_for('search_page')}}">
                                            <i class="fa fa-search" style="width:24px"></i>
                                            <span class="menu-title"><strong>检索节点信息</strong></span>
                                        </a>
                                   </li>
                                    <li>
                                        <a href="{{ url_for('get_all_relation') }}">
                                            <i class="fa fa-pie-chart" style="width:24px"></i>
                                            <span class="menu-title"><strong>图谱全貌</strong></span>
                                        </a>
                                    </li>
                                    <!--Menu list item-->

						            <li class="list-divider"></li>

						            <!--Category name2-->
						            <li class="list-header">问答系统</li>
						            <!--Menu list item-->
                                    <li >
						                <a href="{{ url_for('dialogue_page') }}">
						                    <i class="fa fa-comments" style="width:24px"></i>
						                    <span class="menu-title"><strong>多轮对话</strong></span>
						                </a>
						            </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--End menu-->

                </div>
            </nav>
            <!--END MAIN NAVIGATION-->

            <!--CONTENT CONTAINER-->
            <div id="content-container">
                <!--Page content-->
                <div id="page-content">
					<h4 class="text-main pad-btm bord-btm">检索节点信息</h4>

                <!--选择输入模块-->
                <div class="row">
                <div class="col-lg-6"></div>
                <div class="col-lg-2"></div>
                <div class="col-lg-4">
                    <div class="input-group">
                        <span>
                        <select id="choice" class="form-select" aria-label="Default select example" style="float: left; display: table-cell; width: 58px;height: 37px" >
                            <option value="0">股东</option>
                            <option value="1">股票</option>
                            <option value="2">概念</option>
                        </select></span>
                        <input type="text" id="search" class="form-control input-lg" placeholder="请输入你要检索的节点信息..." style="width: 350px">
                        <span class="input-group-addon btn btn-mint" onclick="search()">搜索</span>
                    </div>
                </div>
                </div>

                <div class="row" style="height: 40px;"></div>
                <div class="row">
                    <!--echarts图-->
                    <div class="col-lg-8" style="height: 700px" id="guanxi"></div>
                    <!--快捷直达模块-->
                    <div class="col-lg-2"></div>
                        <div  class="col-lg-4 tagsList" id="shareholder" style="display: block">
                            <a href="#" data="中信证券" cate="0">中信证券</a>
                            <a href="#" data="方正富邦基金" cate="0">方正富邦基金</a>
                            <a href="#" data="叶钦峰" cate="0">叶钦峰</a>
                            <a href="#" data="中国银泰投资有限公司" cate="0">中国银泰投资有限公司</a>
                            <a href="#" data="胡荣达" cate="0">胡荣达</a>
                            <a href="#" data="中欧基金" cate="0">中欧基金</a>
                            <a href="#" data="亿泽控股有限公司" cate="0">亿泽控股有限公司</a>
                            <a href="#" data="王石" cate="0">王石</a>
                            <a href="#" data="易方达基金" cate="0">易方达基金</a>
                            <a href="#" data="中国电子有限公司" cate="0">中国电子有限公司</a>
                            <a href="#" data="兴业财富资产" cate="0">兴业财富资产</a>
                            <a href="#" data="张志勇" cate="0">张志勇</a>
                        </div>
                        <div class="col-lg-4 tagsList" id="stock" style="display: none">
                            <a href="#" data="平安银行" cate="1">平安银行</a>
                            <a href="#" data="世纪星源" cate="1">世纪星源</a>
                            <a href="#" data="富奥股份" cate="1">富奥股份</a>
                            <a href="#" data="德赛电池" cate="1">德赛电池</a>
                            <a href="#" data="国际实业" cate="1">国际实业</a>
                            <a href="#" data="泸州老窖" cate="1">泸州老窖</a>
                            <a href="#" data="宁德时代" cate="1">宁德时代</a>
                            <a href="#" data="长虹美菱" cate="1">长虹美菱</a>
                            <a href="#" data="我爱我家" cate="1">我爱我家</a>
                            <a href="#" data="格力电器" cate="1">格力电器</a>
                            <a href="#" data="世嘉科技" cate="1">世嘉科技</a>
                            <a href="#" data="绿康生化" cate="1">绿康生化</a>
                        </div>
                        <div class="col-lg-4 tagsList" id="concept" style="display: none">
                            <a href="#" data="银行" cate="2">银行</a>
                            <a href="#" data="碳纤维" cate="2">碳纤维</a>
                            <a href="#" data="特高压" cate="2">特高压</a>
                            <a href="#" data="光通信" cate="2">光通信</a>
                            <a href="#" data="高速公路" cate="2">高速公路</a>
                            <a href="#" data="有色-铝" cate="2">有色-铝</a>
                            <a href="#" data="保险" cate="2">保险</a>
                            <a href="#" data="券商" cate="2">券商</a>
                            <a href="#" data="房地产" cate="2">房地产</a>
                            <a href="#" data="高价股" cate="2">高价股</a>
                            <a href="#" data="教育" cate="2">教育</a>
                            <a href="#" data="涤纶" cate="2">涤纶</a>
                        </div>


                        <!--信息表模块 -->
                        <div class="col-lg-4">
                            <div class="row" style="height: 60px;"></div>
                            <div style="height: 30px; font-size: 18px; font-family: 宋体; border-top: 1px solid black; padding:9px 0 0 13px"><strong>详细信息</strong></div>
                            <div class="row">
                                <div class="basic-info">
                                    <dl class="basicInfo-block basicInfo-left" id="profile" ></dl>
                                </div>
                            </div>
                        </div>
                </div>


                </div>
                <!--End page content-->
            </div>
            <!--END CONTENT CONTAINER-->

        </div>
        <!-- FOOTER -->
        <footer id="footer">
           <p class="pad-lft">Copyright&#0169; 2022 陈学楷  &nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;All Rights Reserved </p>
        </footer>
        <!-- END FOOTER -->

        <!-- SCROLL PAGE BUTTON -->
        <button class="scroll-top btn">
            <i class="pci-chevron chevron-up"></i>
        </button>
    </div>
    <!-- END OF CONTAINER -->
   <script type="text/javascript">
    //调整快捷直达模块内容
    $(function(){
        $(document).ready(function(){
            change(0);
            $("#choice").change(function(){
                var choice = $(this).val();
                if(choice === '0'){
                    $("#shareholder").show();
                    $("#stock").hide();
                    $("#concept").hide();
                    change(choice);
                }
                else if(choice === '1'){
                    $("#shareholder").hide();
                    $("#stock").show();
                    $("#concept").hide();
                    change(choice);
                }
                else if(choice === '2'){
                    $("#concept").show();
                    $("#shareholder").hide();
                    $("#stock").hide();
                    change(choice);
                }
            })

        })
    });

    //回车键事件
    $(document).keypress(function (e) {if (e.which === 13) {search();}});

    //绘制echart
    window.onresize = function () {myChart.resize();}
    $.ajaxSetup({ async: false });
    var myChart = echarts.init(document.getElementById("guanxi"));
    myChart.showLoading();

    myChart.hideLoading();
    option = {
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        legend: {
            x: "center",
            show: true,
            data: ["股东", "股票", "概念"],
            textStyle:{fontSize: 15}
        },
        color:['#FF3EFF','#28cad8','#fc853e'],
        series: [  // 图谱样式设置
            {
                type: 'graph',
                layout: 'force',
                symbolSize: 60,
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 4],
                edgeLabel: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 12
                        },
                        formatter: "{c}"
                    }
                },
                focusNodeAdjacency: true,
                draggable: true,
                roam: true,
                force: {
                    repulsion: 1000
                },
                categories: [{name: '股东',}, {name: '股票'}, {name: '概念',}],
                label: {
                    normal: {
                        show: true,
                        textStyle: {fontSize: 15, color: '#000000'},
                    }
                },
                tooltip: {  //好像没什么用
                    formatter: function (node) { // 区分重复连线和节点，节点上额外显示其他数字
                        if (!node.value) {
                            return node.data.name;
                        } else {
                            return node.data.name + ":" + node.data.showNum;
                        }
                    },
                },
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 1,
                        curveness: 0.3
                    }
                },
                nodes: [],
                links: [],
            }
        ]
    };

    //点击图中元素，展示不同的表内容
    myChart.on('click', function (params) {
        // 点击图中节点也可以查看信息栏
        var type = params.dataType,  //node或edge
            data = params.data,  //json形式，node:{id,category,name}  edge:{source,target,value}
            nodes = option.series[0].nodes,  //数组

            graph = {
                type: JSON.stringify(type),
                data: JSON.stringify(data),
                nodes: JSON.stringify(nodes)
            };
        // 加载详细信息表
        $.ajax({
            url: '/get_chart',
            type: 'post',
            data: graph, //这里使用json对象，或使用JSON.stringify(data)
            dataType: 'json',  //返回数据类型为json
            success: function(data) {$("#profile").html(data);},
            fail: function() {alert("网络连接失败");}
        });
    });

    //超链接直达
    $(".col-lg-4 a").click(function () {
        $.getJSON('/search_node', {
            name: $(this).attr("data"),
            choice: $(this).attr("cate"),
        }, function (json) {
            // 加载图对象
            option.series[0].nodes = json.nodes;
            option.series[0].links = json.links;
            myChart.setOption(option, true);

        })
    });

    //搜索事件
    function search() {
        $.getJSON('/search_node', {
            name: $("#search").val(),
            choice: $("#choice").val(),
        }, function (json) {
            option.series[0].nodes = json.nodes;
            option.series[0].links = json.links;
            myChart.setOption(option, true);

        });
    }
</script>
</body>
</html>
